{% load utils_tags social_tags %}

<div class="NB-shared-story NB-mark {% if story.saved %}NB-story-saved{% endif %} {% if story.shared_by_user %}NB-story-shared{% endif %}" data-feed-id="{{ story.story_feed_id }}" data-story-id="{{ story.id }}" data-guid="{{ story.guid_hash }}" {% if story.user_comments %}data-user-comments="{{ story.user_comments }}"{% endif %}>
    <div class="NB-divider"></div>
    
    <div class="NB-story" {% if story.feed.favicon_border %}style="border-color: #{{ story.feed.favicon_color }};"{% endif %}>
        <div class="NB-story-inner" {% if story.feed.favicon_border %}style="border-color: #{{ story.feed.favicon_border }};"{% endif %}>
            
            <div class="NB-story-header-wrapper">
                <div class="NB-story-header">
                    <h2 class="NB-story-title">
                        <a href="{{ story.story_permalink }}" class="NB-story-title-link">{{ story.story_title|safe }}</a> 
                        {% if story.story_authors %}
                            <span class="NB-story-author">by {{ story.story_authors }}</span>
                        {% endif %}

                        <div class="NB-story-metadata">
                            <span class="NB-story-permalink">
                                <a href="{{ story.blurblog_permalink }}">
                                    {{ story.shared_date|date:"l F j<\s\u\p>S</\s\u\p>, Y"|safe }}
                                    <span class="NB-story-date-break"></span>
                                    <small>at</small>
                                    {{ story.shared_date|date:"g:i A"|safe }}
                                </a>
                            </span>
                        </div>
                    </h2>
                    {# {% if story.story_tags %} #}
                    {#     <div class="NB-story-tags"> #}
                    {#         {% for story_tag in story.story_tags %} #}
                    {#             <div class="NB-story-tag">{{ story_tag }}</div> #}
                    {#         {% endfor %} #}
                    {#     </div> #}
                    {# {% endif %} #}
                </div>
        
            </div>
    
            <div class="NB-feed NB-feed-{{ story.feed.favicon_text_color }}" >
                {% if story.feed %}
                    <div class="NB-feed-favicon">
                        <img src="{{ story.feed.favicon_url }}" />
                    </div>
                    <div class="NB-feed-title">
                        <a href="{{ story.feed.feed_link }}">{{ story.feed.feed_title }}</a>
                    </div>
                {% endif %}
            </div>

            <div class="NB-story-shares-container">
                {% if story.share_count %}
                    {% render_story_share story %}
                {% endif %}
            </div>    

            <div class="NB-story-content-wrapper">
                <div class="NB-story-content">
                    {{ story.story_content|safe }}
                </div>
                <div class="NB-story-content-expander">
                    <div class="NB-story-content-expander-inner">
                        <div class="NB-story-cutoff"></div>
                        <div class="NB-story-content-expander-text">Read the whole story</div>
                        <div class="NB-story-content-expander-pages"></div>
                    </div>
                </div>
            </div>
            
        </div>

    </div>
    
    <div class="NB-story-comments-container">
        {% if story.comment_count or not story.shared_by_user or story.friend_share_count %}
            {% render_story_comments story %}
        {% endif %}
    </div>
    
    {# <div class="NB-feed-story-sideoptions-container"> #}
    {#     {% if not user.is_authenticated %} #}
    {#         <div class="NB-sideoption NB-feed-story-login"> #}
    {#             <div class="NB-sideoption-icon">&nbsp;</div> #}
    {#             <div class="NB-sideoption-title">Login to share</div> #}
    {#         </div> #}
    {#     {% endif %} #}
    {# </div> #}

</div>